<template>
	<view class="cu-modal" :class="modalName=='regModal'?'show':''" @tap="hideModal">
		<view class="cu-dialog" @tap.stop>
			<view class="cu-bar bg-white justify-end">
				<view class="reg-content">绑定信息</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-close text-red"></text>
				</view>
			</view>
			<view class="reg-list text-left solid-top">
				<form>
					<view class="cu-form-group ">
						<view class="wxuser-info-box">
							<view class="wx-avatar"><open-data type="userAvatarUrl"></open-data></view>
							<open-data type="name"></open-data>
						</view>

					</view>
					<!-- <view class="cu-form-group">
						<view class="title">手机号</view>
						<button class='cu-btn bg-blue shadow'>获取手机号</button>
					</view> -->
				</form>

				<view class="reg-item ">
					<view class="content">
					<button class="cu-btn bg-blue round recount" open-type="getPhoneNumber"  lang="zh_CN" @getphonenumber="onGetPhoneNumber">提交绑定</button>
					<!-- <view class="cu-btn bg-blue round recount" @click="bindId">提交绑定</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'goReg',
		data() {
			return {
				transform: 'translateY(50vh)',
				timer: 0,
				backgroundColor: 'rgba(0,0,0,0)',
				show: false,
				name:'',
				phone:'',
				code:'',
				modalName:'',
				config: {},
			};
		},
		props:{
			contentHeight:{
				type: Number,
				default: 0
			},
			//是否是tabbar页面
			hasTabbar:{
				type: Boolean,
				default: false
			},
		},
		created() {
			const height = uni.upx2px(this.contentHeight) + 'px';
			this.config = {
				height: height,
				transform: `translateY(${height})`,
				backgroundColor: 'rgba(0,0,0,.4)',
			}
			this.transform = this.config.transform;

		},
		methods:{
			toggleMask(){
				console.log(this.buyItem)
				//防止高频点击
				if(this.timer == 1){
					return;
				}
				this.timer = 1;
				setTimeout(()=>{
					this.timer = 0;
				}, 500)

				if(this.show){
					this.transform = this.config.transform;
					this.backgroundColor = 'rgba(0,0,0,0)';
					setTimeout(()=>{
						this.show = false;
						this.hasTabbar && uni.showTabBar();
					}, 200)
					return;
				}

				this.show = true;
				//等待mask重绘完成执行
				if(this.hasTabbar){
					uni.hideTabBar({
						success: () => {
							setTimeout(()=>{
								this.backgroundColor = this.config.backgroundColor;
								this.transform = 'translateY(0px)';
							}, 10)
						}
					});
				}else{
					setTimeout(()=>{
						this.backgroundColor = this.config.backgroundColor;
						this.transform = 'translateY(0px)';
					}, 10)
				}
			},
			//防止冒泡和滚动穿透
			stopPrevent(){},
			showModal(modalName) {
				this.modalName = modalName
        wx.login({
          success: (res) => {
            console.log(res);
            if (res.code) {//微信登录成功 已拿到code
              this.code = res.code;
            } else {
              console.log('登录失败！' + res.errMsg)
            }
          }
        })
			},
			hideModal(e) {
				this.modalName = null
			},
			onGetPhoneNumber(e){
				console.log(e);
				if(e.detail.errMsg=="getPhoneNumber:fail user deny"){//用户拒绝授权
				//拒绝授权后弹出一些提示
				}else{//允许授权
					// console.log(e.detail.encryptedData)
					this.bindId(e.detail.iv ,e.detail.encryptedData);
				}

				return;
			},
			async bindId(iv,encryptedData){
				let param = {
					iv:iv,
					encryptedData:encryptedData,
					wx_code:this.code,
					way:this.$wx_name,
					};
				let cid = uni.getStorageSync('cid')
				if(cid!=undefined&&cid){
				param.cid=cid;
				}
				console.log(cid)
				// let data = await this.$http.post('fiveRisks',{city:'重庆市',wages_before:'10000',wages_real:'6000'});
				let data = await this.$http.post(
					'wx/open_id', //可以直接放链接(将不启用全局定义域名)
					param,
				);
				//这里只会在接口是成功状态返回
				console.log(data);
				// 设置用户信息
				uni.setStorageSync('userId',data.id);
				uni.setStorageSync('userInfo',data);
        uni.setStorageSync('userRoles',data.roles);
				this.$emit('eventBind');
				this.hideModal();
				// uni.setStorageSync('userOpenId',data.open_id);
			},
		}
	}
</script>

<style lang='scss'>
	.wxuser-info-box{
		width: 100%;
		height: 100px;
		justify-content: center;
		display: grid;
		text-align: center;
	}
	.wx-avatar{
		width: 64px;
		height: 64px;
		border-radius: 50%;
		overflow: hidden;
	}
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.reg-item{
		.content{
			height: 50px;
			padding: 0 10px;
		}
		.cu-btn{
			width: 100%;
			height: 40px;
			margin: 0;
		}
	}
	.reg-content{
		position: absolute;
		text-align: center;
		width: calc(100% - 340rpx);
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		margin: auto;
		height: 60rpx;
		font-size: 32rpx;
		line-height: 60rpx;
		cursor: none;
		pointer-events: none;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.reg-list{
		height: 150px;
		background: #FFFFFF;
	}
	.cu-dialog{
		.cu-bar{
			margin-top: 0!important;
			display: flex !important;
		}
	}
</style>
